<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>收益图展示</title>
		<script type="text/javascript" src="jquery.min.jsf"></script>
		<script type="text/javascript" src="highcharts.jsf"></script>
		<script type="text/javascript">
			$(document).ready(function() {

				Ti.App.addEventListener('pageReady', function(e) {
					Highcharts.setOptions({
						colors : ['#058DC7', '#50B432', '#DDDF00', '#ED561B']
					});

					var data = e.id;

					var options = {

						chart : {
							renderTo : 'container',
						},
						title : {
							text : '被保人：',
						},
						credits : {
							enabled : false
						},
						subtitle : {
							text : '产品：',
						},
						xAxis : {
							categories : []
						},
						yAxis : {
							title : {
								text : '单位：元'
							},
							plotLines : [{
								value : 0,
								width : 1,
								color : '#808080'
							}]
						},
						tooltip : {
							formatter : function() {
								return '<b>' + this.series.name + '</b><br/>' + '保单年度第' + this.x + '年: ' + this.y + '元';
							}
						},
						legend : {
							x : -20,
							borderWidth : 1
						},
						series : []
					};

					// Split the lines
					var lines = data.split(';');
					$.each(lines, function(lineNo, line) {
						var items = line.split(',');

						// 封装被保人姓名、产品
						if (lineNo == 0) {
							options.title.text = '被保人:' + items[0];
							options.subtitle.text = '投保产品:' + items[1];
						}

						// 收益项目
						else if (lineNo == 1) {
							$.each(items, function(itemNo, item) {
								options.xAxis.categories.push(item);
							});
						}

						// the rest of the lines contain data with their name in the first position
						else {
							var series = {
								data : []
							};
							$.each(items, function(itemNo, item) {
								if (itemNo == 0) {
									series.type = item;
								} else if (itemNo == 1) {
									series.name = item;
								} else {
									series.data.push(parseFloat(item));
								}
							});

							options.series.push(series);

						}

					});

					var chart = new Highcharts.Chart(options);
				})
			});

		</script>

	</head>
	<body>
		<div id="container" > </div>
	</body>
</html>
